<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center agriculturalList_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub agriculturalList_fd0_0'>
          <view class='flex flex-wrap align-center agriculturalList_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='agriculturalList_fd0_0_c1_c0'>农具列表</text>
          </view>
          <view class='flex flex-wrap align-center justify-end agriculturalList_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-stretch justify-center benben-flex-layout">
        <view style="position: relative">
          <swiper @change="bannerIndexfd1_0 = $event.detail.current"
            class='flex position-relative agriculturalList_fd1_0' previous-margin="0rpx" next-margin="0rpx"
            :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>

            <template v-for='(item,key0) in Classificationchart'>
              <swiper-item class='flex  agriculturalList_fd1_0' :key='key0'>
                <image class='agriculturalList_fd1_0_c1_c0' mode="aspectFill" :src='item.thumb'
                  @tap.stop="rotationJumpFunc(item.href)"></image>
              </swiper-item>
            </template>

          </swiper>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <benben-goods-classify class='flex  agriculturalList_flex_classify_2' :top='338' :is-three-level='false'
        :handle-id.sync='checkId' :lists='classificationList' @refresh="getclassificationListFunc()"
        @handle-item="clickClassificationFunc(checkId)">
      </benben-goods-classify>


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},


    data() {
      return {
        "bannerIndexfd1_0": 0,
        "Classificationchart": [],
        "classificationList": [],
        "checkId": ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {

      this.getChartFunc()
      this.getclassificationListFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      if (uni.getStorageSync('cateId')) {
        this.checkId = uni.getStorageSync('cateId')
      }
      console.log('222222', this.checkId)
    },
    onHide() {
      uni.setStorageSync('cateId','')
    },
    onResize() {

    },
    onPullDownRefresh() {
      this.getChartFunc()
    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //获取分类轮播图
      async getChartFunc() {
        //请求方法
        //数据验证

        let dataClassificationchart = await this.$api.get(global.apiUrls.post62c7e3aba33c4, {
          type_id: '2',
          list_rows: '15'
        });

        if (dataClassificationchart.data.code != 1) {
          this.$message.info(dataClassificationchart.data.msg);
          return
        }
        let infoClassificationchart = dataClassificationchart.data;
        this.Classificationchart = infoClassificationchart.data
      },
      //轮播图跳转
      rotationJumpFunc(href) {
        this.dynamicJump(href);
      },
      //获取分类列表
      async getclassificationListFunc() {
        //请求方法
        //数据验证

        let dataclassificationList = await this.$api.get(global.apiUrls.post62c3b236b9e99, {
          list_rows: '15'
        });

        if (dataclassificationList.data.code != 1) {
          this.$message.info(dataclassificationList.data.msg);
          return
        }
        let infoclassificationList = dataclassificationList.data;
        this.classificationList = infoclassificationList.data
        if (uni.getStorageSync('cateId')) {
          this.checkId = uni.getStorageSync('cateId')
        }else{
         this.checkId =this.classificationList[0].aid
        }

      },
      //点击分类
      clickClassificationFunc(cid) {
        this.$urouter.navigateTo(`/pages/agriculturalTools/cateName/cateName?keywords=&cid=${cid}`);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto;
  }

  .agriculturalList_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .agriculturalList_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    line-height: 88rpx;
  }

  .agriculturalList_fd0_0_c0 {
    width: 120rpx;
  }

  .agriculturalList_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .agriculturalList_numberfd1_0_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .agriculturalList_fd1_0_c1_c0 {
    width: 702rpx;
    height: 200rpx;
    border-radius: 16rpx;
  }

  .agriculturalList_fd1_0 {
    width: 702rpx;
    height: 200rpx;
  }

  .agriculturalList_swiperDotUnselectedfd1_0 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .agriculturalList_swiperDotSelectedfd1_0 {
    border: 1px solid #00A7FF;
    background: #00A7FF;
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .agriculturalList_swiperDotfd1_0 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  ::v-deep .agriculturalList_flex_classify_2 {
    --classify-radius: 0rpx;
    --active-tag-color: red;
  }
</style>
